<template>
	<view class="">
		<u-navbar title="预约试骑" :autoBack="true" :placeholder="true"></u-navbar>

		<image src="https://wyc.jslhkj.cn/uploads/20231031/61fdba49dff841cde071dddabaed0a5e.jpg" mode="" class="bg-login"></image>

		<view class="yy-form">

			<view class="flex input-cell">
				<view class="input-label">姓名</view>
				<view class="input-box">
					<input type="text" class="input" v-model="name" placeholder="请输入姓名">
				</view>
			</view>
			<view class="flex input-cell">
				<view class="input-label">昵称</view>
				<view class="input-box">
					<input type="text" class="input" v-model="nickname" placeholder="请输入昵称">
				</view>
			</view>
			<view class="flex input-cell">
				<view class="input-label">性别</view>
				<view class="input-box">
					<input type="text" class="input" v-model="sex" placeholder="请输入性别">
				</view>
			</view>
			<view class="flex input-cell">
				<view class="input-label">手机号</view>
				<view class="input-box">
					<input type="text" class="input" v-model="moblie" placeholder="请输入手机号">
				</view>
			</view>
			<view class="flex input-cell">
				<view class="input-label">生日</view>
				<view class="input-box">
					<input type="text" class="input" v-model="birthtime" placeholder="请输入生日">
				</view>
			</view>
		</view>

		<button @click="addyuyue" class="submit-btn">提交</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				uid: wx.getStorageSync('userId'),
				name: '',
				moblie: '',
				nickname: '',
				sex: '',
				birthtime: '',
			}
		},

		onLoad() {

		},

		methods: {
			async addyuyue() {
				let patams = {
					uid: this.uid,
					name: this.name,
					moblie: this.moblie,
					nickname: this.nickname,
					sex: this.sex,
					birthtime: this.birthtime
				};
				let res = await this.$api.addyuyue(patams);
				console.log(res);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.bg-login {
		width: 100vw;
		height: 480rpx;
		// position: absolute;
		z-index: -100;
	}

	.submit-btn {
		background-color: #111;
		color: white;
		margin: 50rpx 20rpx 0 20rpx;
		border-radius: 50rpx;
	}

	.yy-form {
		background-color: white;
		padding-bottom: 20rpx;
	}

	.input-cell {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 20rpx;
		justify-content: space-between;
		margin-bottom: 20rpx;
		font-size: 28rpx;

	}

	.input {
		height: 80rpx;
		background-color: #eee;
		width: calc(100% - 20rpx);
		padding-left: 20rpx;
		border-radius: 10rpx;
	}

	.input-label {
		width: 120rpx;
		text-align: right;
		font-weight: 700;
	}

	.input-box {
		flex: 2;
		padding-left: 20rpx;
	}
</style>